import React from 'react';
import { DownloadOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, message, Row, Spin } from 'antd';
import { connect } from 'dva';
import downloadFile from '@/utils/utils';
import StandardTable from '@/components/StandardTable';
import TextOverFlow from '../../components/TextOverFlow';

let uploadFiles = null;
message.config({
  top: 113,
  duration: 2,
});
@connect(({ loading, customerbilling }) => ({
  loading: loading.models.customerbilling,
  billDetailDataInfo: customerbilling.billDetailDataInfo,
  titType: customerbilling.titType, // 标题类型
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  state = {
    allScroll: { x: 13000 },
    insAccuScroll: { x: 9000 },
    salaryScroll: { x: 4200 },
    billId: '',
    exportLoding: false,
  };

  componentDidMount = () => {
    const {
      comment,
      billDetailDataInfo: { pagination },
    } = this.props;
    this.setState({ billId: comment });
    this.getList(pagination.current, pagination.pageSize);
    window.clearInterval(uploadFiles);
  };

  // 获取列表数据
  getList = (nowPage, pageNum) => {
    const { comment, dispatch } = this.props;
    const billId = comment;
    const pageArg = {
      currentPage: nowPage,
      pageSize: pageNum,
    };
    dispatch({
      type: 'customerbilling/billDetailsData',
      payload: { billId, pageArg },
    });
  };

  // 导出excel
  export = () => {
    const { billId } = this.state;
    const params = {
      billIdList: [billId],
    };
    const { dispatch } = this.props;
    this.setState({
      exportLoding: true,
    });
    dispatch({
      type: 'customerbillcs/singleExport',
      payload: params,
    }).then(res => {
      if (res.success) {
        uploadFiles = setInterval(() => {
          dispatch({
            type: 'customerbillcs/uploadFile',
            payload: { billKey: res.data, downType: 1 },
          }).then(resFile => {
            if (resFile.success) {
              if (resFile.success && resFile.data && resFile.data.fileId && resFile.data.fileName) {
                downloadFile({ fileId: resFile.data.fileId, fileName: resFile.data.fileName });
                window.clearInterval(uploadFiles);
                this.setState({
                  exportLoding: false,
                });
              }
            } else {
              message.warning(resFile.message || '下载失败');
              window.clearInterval(uploadFiles);
              this.setState({
                exportLoding: false,
              });
            }
          });
        }, 2000);
      } else {
        window.clearInterval(uploadFiles);
        this.setState({
          exportLoding: false,
        });
        message.warning(res.message || '下载失败');
      }
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    this.getList(pagination.current, pagination.pageSize);
  };

  render() {
    const { loading, billDetailDataInfo,  billDetailDataInfo: { bnftCol,cmpinsCol },titType } = this.props;
    const { allScroll, insAccuScroll, salaryScroll, exportLoding } = this.state;
    // 社保公积金，工资的表格账单
    const allColumns = [
      {
        title: '客户编号',
        dataIndex: 'custNo',
        onCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        fixed: 'left',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '证件号',
        dataIndex: 'cardNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '社保个人账号',
        dataIndex: 'insIndvAccoNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '公积金个人账号',
        dataIndex: 'accuIndvAccoNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '成本中心',
        dataIndex: 'costCenterName',
        width: 180,
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: val => val || '--',
      },
      {
        title: '缴费人员类别',
        dataIndex: 'insIdeName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => val || '--',
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: text => {
          if (text) {
            return `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`;
          }
          return null;
        },
      },
      {
        title: '养老保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['pensDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['pensDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['pensDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['pensDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['pensDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['pensDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['pensDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['pensDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['pensDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['pensDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '医疗保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['medDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['medDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['medDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['medDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['medDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['medDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['medDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['medDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['medDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['medDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '失业保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['unempDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['unempDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['unempDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['unempDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['unempDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['unempDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['unempDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['unempDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['unempDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['unempDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '工伤保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['injDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['injDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['injDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['injDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['injDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['injDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['injDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['injDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['injDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['injDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '生育保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['birthDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['birthDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['birthDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['birthDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['birthDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['birthDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['birthDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['birthDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['birthDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['birthDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '住房公积金',
        children: [
          {
            title: '执行地',
            dataIndex: ['accuDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['accuDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['accuDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['accuDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['accuDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['accuDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['accuDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['accuDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['accuDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '个人社保总计',
        dataIndex: 'perInsSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '单位社保总计',
        dataIndex: 'entpInsSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '社保缴纳合计',
        dataIndex: 'insPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '公积金缴纳合计',
        dataIndex: 'accuPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '社保公积金缴纳合计',
        dataIndex: 'insAccuPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '服务费',
        dataIndex: 'serFee',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '一次性费用',
        children: [
          {
            title: '总金额',
            dataIndex: ['onceFee', 'feeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人部分',
            dataIndex: ['onceFee', 'perAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业部分',
            dataIndex: ['onceFee', 'entpAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '服务费',
            dataIndex: ['onceFee', 'fee'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '一次性费用说明',
        dataIndex: ['onceFee', 'detail'],
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '福利',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        children: bnftCol?.map?.(item=>({
          title: item.name,
          dataIndex: ['bnftDet', item.value],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        }))
      },
      {
        title: '保险',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        children: cmpinsCol?.map?.(item=>({
          title: item.name,
          dataIndex: ['cmpinsDet', item.value],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        }))
      },
      {
        title: '年度体检',
        dataIndex: 'medExamAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '风险金',
        dataIndex: 'riskAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '工资',
        children: [
          {
            title: '工资金额',
            dataIndex: ['wageDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '本期免税收入',
            dataIndex: ['wageDet', 'advAdjAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '养老个人',
            dataIndex: ['wageDet', 'pensAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '医疗个人',
            dataIndex: ['wageDet', 'medAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '失业个人',
            dataIndex: ['wageDet', 'unempAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '公积金个人',
            dataIndex: ['wageDet', 'accuAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计子女教育支出',
            dataIndex: ['wageDet', 'acumChildEduPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计继续教育支出',
            dataIndex: ['wageDet', 'acumCntnuEduPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计住房贷款利息支出',
            dataIndex: ['wageDet', 'acumHousMortgPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计住房租金支出',
            dataIndex: ['wageDet', 'acumHousRentPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计赡养老人支出',
            dataIndex: ['wageDet', 'acumSuptElderPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业（职业）年金',
            dataIndex: ['wageDet', 'firmAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '商业健康保险',
            dataIndex: ['wageDet', 'comAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '税延养老保险',
            dataIndex: ['wageDet', 'defrPenAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '其他抵扣',
            dataIndex: ['wageDet', 'otherDedu'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '准予扣除的捐赠额',
            dataIndex: ['wageDet', 'allowDdctblDon'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '减免税额',
            dataIndex: ['wageDet', 'ddctblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '本月应缴税额',
            dataIndex: ['wageDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '税后扣款',
            dataIndex: ['wageDet', 'aftAdjAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '补退税额(上月)',
            dataIndex: ['wageDet', 'agoRtnAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '实发金额',
            dataIndex: ['wageDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '补退税额(本月)',
            dataIndex: ['wageDet', 'nowRtnAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '年终奖',
        children: [
          {
            title: '年终奖金额',
            dataIndex: ['yearEndDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '年终奖个人所得税',
            dataIndex: ['yearEndDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '年终奖实发金额',
            dataIndex: ['yearEndDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '离职补偿金',
        children: [
          {
            title: '离职补偿金金额',
            dataIndex: ['resignDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '离职补偿金个人所得税',
            dataIndex: ['resignDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '离职补偿金实发金额',
            dataIndex: ['resignDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '劳务报酬',
        children: [
          {
            title: '劳务报酬金额',
            dataIndex: ['remuneDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '劳务报酬个人所得税',
            dataIndex: ['remuneDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '劳务报酬实发金额',
            dataIndex: ['remuneDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '实发合计',
        dataIndex: 'wageRealAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个税合计',
        dataIndex: 'wageTaxblAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '工资应收合计',
        dataIndex: 'wageSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '增值税',
        dataIndex: 'vatTaxAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '合计',
        dataIndex: 'sum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];

    // 社保公积金表格账单
    const insAccuColumns = [
      {
        title: '客户编号',
        dataIndex: 'custNo',
        onCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        fixed: 'left',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '证件号',
        dataIndex: 'cardNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '社保个人账号',
        dataIndex: 'insIndvAccoNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '公积金个人账号',
        dataIndex: 'accuIndvAccoNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '成本中心',
        dataIndex: 'costCenterName',
        width: 180,
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: val => val || '--',
      },
      {
        title: '缴费人员类别',
        dataIndex: 'insIdeName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => val || '--',
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: text => {
          if (text) {
            return `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`;
          }
          return null;
        },
      },
      {
        title: '养老保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['pensDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['pensDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['pensDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['pensDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['pensDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['pensDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['pensDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['pensDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['pensDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['pensDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '医疗保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['medDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['medDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['medDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['medDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['medDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['medDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['medDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['medDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['medDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['medDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '失业保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['unempDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['unempDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['unempDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['unempDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['unempDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['unempDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['unempDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['unempDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['unempDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['unempDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '工伤保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['injDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['injDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['injDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['injDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['injDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['injDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['injDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['injDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['injDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['injDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '生育保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['birthDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['birthDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['birthDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['birthDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['birthDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['birthDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['birthDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['birthDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['birthDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['birthDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '住房公积金',
        children: [
          {
            title: '执行地',
            dataIndex: ['accuDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['accuDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['accuDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['accuDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['accuDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['accuDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['accuDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['accuDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['accuDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '个人社保总计',
        dataIndex: 'perInsSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '单位社保总计',
        dataIndex: 'entpInsSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '社保缴纳合计',
        dataIndex: 'insPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '公积金缴纳合计',
        dataIndex: 'accuPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个人合计',
        dataIndex: 'perPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '单位合计',
        dataIndex: 'entpPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '社保公积金缴纳合计',
        dataIndex: 'insAccuPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '服务费',
        dataIndex: 'serFee',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      // 现有的社保、公积金、工资、服务费增值税都合并为增值税
      {
        title: '福利',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        children: bnftCol?.map?.(item=>(
          {
              title: item.name,
              dataIndex: ['bnftDet', item.value],
              onCell: () => ({ style: { textAlign: 'center' } }),
              onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        }))
      },
      {
        title: '保险',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        children: cmpinsCol?.map?.(item=>({
          title: item.name,
          dataIndex: ['cmpinsDet', item.value],
          onCell: () => ({ style: { textAlign: 'center' } }),
          onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        }))
      },
      {
        title: '年度体检',
        dataIndex: 'medExamAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '风险金',
        dataIndex: 'riskAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '一次性费用',
        children: [
          {
            title: '总金额',
            dataIndex: ['onceFee', 'feeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人部分',
            dataIndex: ['onceFee', 'perAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业部分',
            dataIndex: ['onceFee', 'entpAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '服务费',
            dataIndex: ['onceFee', 'fee'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '一次性费用说明',
        dataIndex: ['onceFee', 'detail'],
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '增值税',
        dataIndex: 'vatTaxAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '合计',
        dataIndex: 'sum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];

    // 工资表格账单
    const salaryColumns = [
      {
        title: '客户编号',
        dataIndex: 'custNo',
        onCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        fixed: 'left',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '证件号',
        dataIndex: 'cardNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '成本中心',
        dataIndex: 'costCenterName',
        width: 180,
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: val => val || '--',
      },
      {
        title: '缴费人员类别',
        dataIndex: 'insIdeName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => val || '--',
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: text => {
          if (text) {
            return `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`;
          }
          return null;
        },
      },
      {
        title: '工资',
        children: [
          {
            title: '工资金额',
            dataIndex: ['wageDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '本期免税收入',
            dataIndex: ['wageDet', 'advAdjAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '养老个人',
            dataIndex: ['wageDet', 'pensAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '医疗个人',
            dataIndex: ['wageDet', 'medAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '失业个人',
            dataIndex: ['wageDet', 'unempAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '公积金个人',
            dataIndex: ['wageDet', 'accuAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计子女教育支出',
            dataIndex: ['wageDet', 'acumChildEduPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计继续教育支出',
            dataIndex: ['wageDet', 'acumCntnuEduPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计住房贷款利息支出',
            dataIndex: ['wageDet', 'acumHousMortgPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计住房租金支出',
            dataIndex: ['wageDet', 'acumHousRentPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计赡养老人支出',
            dataIndex: ['wageDet', 'acumSuptElderPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业（职业）年金',
            dataIndex: ['wageDet', 'firmAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '商业健康保险',
            dataIndex: ['wageDet', 'comAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '税延养老保险',
            dataIndex: ['wageDet', 'defrPenAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '其他抵扣',
            dataIndex: ['wageDet', 'otherDedu'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '准予扣除的捐赠额',
            dataIndex: ['wageDet', 'allowDdctblDon'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '减免税额',
            dataIndex: ['wageDet', 'ddctblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '本月应缴税额',
            dataIndex: ['wageDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '税后扣款',
            dataIndex: ['wageDet', 'aftAdjAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '补退税额(上月)',
            dataIndex: ['wageDet', 'agoRtnAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '实发金额',
            dataIndex: ['wageDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '补退税额(本月)',
            dataIndex: ['wageDet', 'nowRtnAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '年终奖',
        children: [
          {
            title: '年终奖金额',
            dataIndex: ['yearEndDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '年终奖个人所得税',
            dataIndex: ['yearEndDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '年终奖实发金额',
            dataIndex: ['yearEndDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '离职补偿金',
        children: [
          {
            title: '离职补偿金金额',
            dataIndex: ['resignDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '离职补偿金个人所得税',
            dataIndex: ['resignDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '离职补偿金实发金额',
            dataIndex: ['resignDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '劳务报酬',
        children: [
          {
            title: '劳务报酬金额',
            dataIndex: ['remuneDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '劳务报酬个人所得税',
            dataIndex: ['remuneDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '劳务报酬实发金额',
            dataIndex: ['remuneDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '实发合计',
        dataIndex: 'wageRealAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个税合计',
        dataIndex: 'wageTaxblAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '工资应收合计',
        dataIndex: 'wageSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '增值税',
        dataIndex: 'vatTaxAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '合计',
        dataIndex: 'sum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];
    const onColumns = parameter => {
      if (parameter === 1) {
        return allColumns;
      }
      if (parameter === 2) {
        return insAccuColumns;
      }
      return salaryColumns;
    };
    const onScroll = parameter => {
      if (parameter === 1) {
        return allScroll;
      }
      if (parameter === 2) {
        return insAccuScroll;
      }
      return salaryScroll;
    };
    return (
      <Spin spinning={exportLoding}>
        <Row gutter={32} style={{ marginBottom: 16 }}>
          <Button style={{ marginLeft: 16 }} type="primary" onClick={() => this.export()}>
            <DownloadOutlined />
            下载
          </Button>
        </Row>
        <StandardTable
          selectedRows={[]}
          selectedRowKeys={[]}
          rowSelection={null}
          loading={loading}
          data={billDetailDataInfo}
          rowKey="billDetId"
          columns={onColumns(titType)}
          scroll={onScroll(titType)}
          bordered
          onChange={this.handleStandardTableChange}
        />
      </Spin>
    );
  }
}
export default ClientInfoDetails;
